<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>注册页面</title>
    <link rel="stylesheet" href="css/bootstrapRegister.css"/>
    <link rel="stylesheet" href="css/bootstrapValidator.css"/>

    <script type="text/javascript" src="js/jquery-3.0.0.min.js"></script>
    <script type="text/javascript" src="js/bootstrapRegister.min.js"></script>
    <script type="text/javascript" src="js/bootstrapValidator.js"></script>
    <script type="text/javascript" src="js/language/zh_CN.js"></script>
    
    <script type="text/javascript">
        $(function () {

            $("#register").click(function () {
                // 请求数据体
                var requestData = {
                    'userName': $('#userName').val(), // 通过id查找标签元素，val()获取该标签元素的值
                    'password': $('#password').val(),
                    //					'confirmPassword' : $('#confirmPassword').val(),
                    'phone': $('#phone').val(),
                    'email': $('#email').val(),
                    'remark': $('#remark').val()
                };

                $.ajax({
                    url: "/api/v1/user",
                    type: "POST",
                    data: JSON.stringify(requestData), // data:发送数据，JSON.stringify()转成json字符串
                    crossDomain: true, // 跨域，即不同域名、端口号可以访问
                    contentType: 'application/json; charset=utf-8',  // 请求体数据格式 json字符串

                    success: function (d) { // 请求成功时执行的回调函数，d: 返回数据(json格式)
                        //alert("ok")
                        if (d['status'] == 500) {
                            alert(d['message']);

                        }
                        if (d['status'] == 200) {
                            alert("注册成功");
                            window.location.href = 'login.html';
                        }
                    },
                    error: function () {
                    }, // 同理，请求失败执行的回调函数
                    dataType: "json" // 返回数据的格式 json
                });
            });

            $("#userName").blur(function () {
                if ($("#userName").val() == "") {
                    $("#warn").text("请填写用户名");
                    $("#register").attr("disabled", "true"); //禁用按钮

                } else {
                    $.ajax({
                        url: "/api/v1/user/isExist",
                        type: "GET",
                        data: JSON.stringify({userName: $("#userName").val()}), // data:发送数据，JSON.stringify()转成json字符串
                        crossDomain: true, // 跨域，即不同域名、端口号可以访问
                        contentType: 'application/json; charset=utf-8',  // 请求体数据格式 json字符串
                        success: function (d) {
                            //alert("ok")
                            if (d['status'] == 500) {
                                alert(d['data']);

                            }
                            if (d['status'] == 200) {

                                if (d['data'] == true) {
                                    //alert("ok")
                                    $("#warn").text("用户名不可用");
                                    $("#register").attr("disabled", "true");

                                } else {
                                    $("#warn").text("用户名可以用");
                                    $("#register").attr("disabled", false);
                                }
                            }
                        },
                        error: function () {
                        },
                        dataType: "json"
                    });
                }
            });
        });

</script>
</head>
<body>
    <div class="container">
        <div class="row">
            <!-- form: -->
            <section>
                <div class="page-header">
                    <h1>注册</h1>
                </div>
                <div class="col-lg-8 col-lg-offset-2">
                    <form id="defaultForm" class="form-horizontal">
                        <div class="form-group">
                            <label class="col-lg-3 control-label">用户名</label>
                            <div class="col-lg-5">
                                <input type="text" class="form-control" name="userName" id="userName" autocomplete="off" />
                                <span id="warn"></span>
                            </div>
                        </div>
						
						<div class="form-group">
                            <label class="col-lg-3 control-label">密码</label>
                            <div class="col-lg-5">
                                <input type="password" class="form-control" name="password" id="password"/>
                            </div>
                        </div>
						
						<div class="form-group">
                            <label class="col-lg-3 control-label">确认密码</label>
                            <div class="col-lg-5">
                                <input type="password" class="form-control" name="confirmPassword" id="confirmPassword"/>
                            </div>
                        </div>
						
						<div class="form-group">
                            <label class="col-lg-3 control-label">手机号码</label>
                            <div class="col-lg-5">
                                <input type="text" class="form-control" name="phone" id="phone" />
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-lg-3 control-label">邮箱地址</label>
                            <div class="col-lg-5">
                                <input type="text" class="form-control" name="email" id="email" autocomplete="off" />
                            </div>
                        </div>
						
						<div class="form-group">
                            <label class="col-lg-3 control-label">备注</label>
                            <div class="col-lg-5">
                                <input type="text" class="form-control" name="remark" id="remark"/>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-lg-9 col-lg-offset-3">
                                <button class="btn btn-info" type="button" name="register" id="register">注册</button>
                            </div>
                        </div>
                    </form>
                </div>
            </section>
            <!-- :form -->
        </div>
    </div>

<script type="text/javascript">
$(document).ready(function() {
    $('#defaultForm').bootstrapValidator({
        message: '此值无效',
//        live: 'disabled',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            userName: {
                message: '该用户名无效',
                validators: {
                    notEmpty: {
                        message: '用户名必填，不能为空'
                    },
                    remote: {
                        type: 'POST',
                        url: '/api/v1/user/isExist',
                        message: '该用户名不可用',
                        delay: 1000
                    },
                    different: {
                        field: 'password',
                        message: '用户名和密码不能相同'
                    }
                }
            },
            password: {
                validators: {
                    notEmpty: {
                        message: '密码必填，不能为空'
                    },
                    identical: {
                        field: 'confirmPassword',
                        message: '密码和确认密码不相同'
                    },
                    different: {
                        field: 'userName',
                        message: '密码不能和用户名相同'
                    }
                }
            },
            confirmPassword: {
                validators: {
                    notEmpty: {
                        message: '确认密码必填，不能为空'
                    },
                    identical: {
                        field: 'password',
                        message: '确认密码和密码不相同'
                    }
                }
            },
            phone: {
                validators: {
                    digits: {
                        message: '手机号码只能包含数字'
                    }
                }
            },
			email: {
                validators: {
                    notEmpty: {
                        message: '邮箱地址必填，不能为空'
                    },
                    emailAddress: {
                        message: '输入的值不是有效的邮箱地址'
                    },
                    remote: {
                        type: 'POST',
                        url: '',
                        message: '邮箱无效',
                        delay: 2000
                    }
                }
            }
        }
    });
});

</script>
    
</body>
</html>